<script setup>
import { reactive, ref } from 'vue'
import { getNoticeList } from '@/api/notice'
import { onShow } from "@dcloudio/uni-app";

const pageData = reactive({
  activeTab: 0,
  loading: false,
  loadingBottom: false,
  listData: [],
  queryListParams: {
    pageNum: 1,
    pageSize: 15,
  },
  total: 0,
  noMore: false,
  showBasic: false,
  noticeContent: '',
  pageData: {},
  api: getNoticeList
})

const getList = (api) => {
  pageData.loading = true
  pageData.loadingBottom = true
  return pageData.api(pageData.queryListParams).then(res => {
    console.log(res)
    pageData.loading = false
    pageData.loadingBottom = false
    pageData.listData = [
      ...pageData.listData,
      ...res.rows
    ]
    pageData.total = res.total
  })
}

const createStoreCatch = ref({})
onShow(async () => {
  pageData.listData = []
  await getList()
  createStoreCatch.value = uni.getStorageSync('createStoreCatch')
})
const lower = (e) => {
  if(pageData.listData.length >= pageData.total) return
  pageData.queryListParams.pageNum++
  getList()
}
const onRefresh = (e) => {
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  getList()
}
const toDetail = (id) => {
  uni.navigateTo({
    url: '/pages/notice/detail?id='+id
  })
}
</script>

<template>  
  <scroll-view :scroll-top="0" :scroll-y="true" :refresher-enabled="true" class="list-body" @scrolltolower="lower" @refresherrefresh="onRefresh">
    <view v-if="pageData.listData.length">
      <view v-for="(item,index) in pageData.listData" :key="item.noticeId" @click="toDetail(item.noticeId)">
        <nut-noticebar
            wrapable
            :scrollable="false"
            :text="item.noticeTitle"
            :background="`rgba(251, 248, 220, 1)`"
            :custom-color="`#D9500B`"
          >
          <template #rightIcon>
            {{ item.startTime?.substring(0, 10) }}
          </template>
        </nut-noticebar>
      </view>
    </view>
    <view v-if="pageData.loadingBottom === true && pageData.listData.length" class="loading-bottom">
      <nut-icon name="loading"></nut-icon>
    </view>
    <nut-empty v-if="pageData.loading === false && !pageData.listData.length" image="empty" description="无内容"></nut-empty>
    <view v-if="pageData.loading === true && !pageData.listData.length" class="loading-box">
      <nut-icon name="loading"></nut-icon>
    </view>
    <view v-if="pageData.listData.length >= pageData.total && pageData.listData.length !== 0" class="no-more">没有更多···</view>
  </scroll-view>
</template>

<style lang="scss">
.list-body{padding: 10px 0 80px;box-sizing:border-box;height: calc(100vh - 40px);}
.loading-box{width: 100%;height: 300px;display: flex;justify-content: center;align-items: center;}
.loading-bottom{width: 100%;display: flex;justify-content: center;align-items: center;}
.no-more{display: flex;padding: 20px;justify-content: center;font-size: 12px;color: #aaa;}
.nut-noticebar .nut-noticebar__page{margin-bottom: 10px;}
</style>
<style>
.nut-tab-pane{display: none!important;}
.nut-list-item{height: auto!important;}
.nav{background: #f0f0f0;}
.nav .nut-menu .nut-menu__bar{box-shadow: none;}
</style>
